<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户</title>
    <script type="text/javascript" src="/crm/js/vue.js"></script>
    <script type="text/javascript" src="/crm/js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
    <div id="custInfo">
        <template>
            <el-table
                    :data="customers"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="客户名称">
                                <span>{{ props.row.customername }}</span>
                            </el-form-item>
                            <el-form-item label="联系方式">
                                <span>{{ props.row.firsttel }}</span>
                            </el-form-item>
                            <el-form-item label="备用联系方式">
                                <span>{{ props.row.secondtel }}</span>
                            </el-form-item>
                            <el-form-item label="性别">
                                <span>{{ props.row.sex }}</span>
                            </el-form-item>
                            <el-form-item label="证件类型">
                                <span>{{ props.row.idtype }}</span>
                            </el-form-item>
                            <el-form-item label="证件号码">
                                <span>{{ props.row.idcard }}</span>
                            </el-form-item>
                            <el-form-item label="客户地址">
                                <span>{{ props.row.address }}</span>
                            </el-form-item>
                            <el-form-item label="是否婚配">
                                <span>{{ props.row.marriage }}</span>
                            </el-form-item>
                            <el-form-item label="工作类型">
                                <span>{{ props.row.job }}</span>
                            </el-form-item>
                            <el-form-item label="意向产品">
                                <span>{{ props.row.productid }}</span>
                            </el-form-item>
                            <el-form-item label="创建时间">
                                <span>{{ props.row.createtime }}</span>
                            </el-form-item>
                            <el-form-item label="客户来源">
                                <span>{{ props.row.customersource }}</span>
                            </el-form-item>
                            <el-form-item label="客户等级">
                                <span>{{ props.row.customerlevel }}</span>
                            </el-form-item>
                            <el-form-item label="接待人">
                                <span>{{ props.row.empid }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="客户名称"
                        prop="customername">
                </el-table-column>
                <el-table-column
                        label="性别"
                        prop="sex">
                </el-table-column>
                <el-table-column
                        label="联系方式"
                        prop="firsttel">
                </el-table-column>
                <el-table-column
                        label="意向产品"
                        prop="productid">
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        prop="createtime">
                </el-table-column>
            </el-table>
        </template>
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#custInfo",
        data:{
            customers:[],
            pageNo:'',
            pageSize:'',
        },
        created:function () {
            //封装分页查询条件
            var temp=this;
            var query={"pageNo":this.pageNo,"pageSize":this.pageSize};
            axios.post('listCustomer',query)
                .then(function (value) {
                    temp.customers=value.data;
                    //this.total = value.data.totalList;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        }
    )
</script>
</html>